<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
			1.Vue中的数据代理：
				通过vm对象来代理data对象中属性的操作（读/写）
			2.Vue中数据代理的好处：
				更加方便的操作data中的数据
			3.基本原理：
				通过Object.defineProperty()把data对象中
				所有属性添加到vm上。为每一个添加到vm上的属性，
				都去指定一个getter和setter。在getter和setter
				内部去操作（读/写）data中对应的属性。
		 -->
		<!-- 创建容器 -->
		<div id="root">
		<h1>{{name}}</h1>
		</div>
		
		
		<script type="text/javascript">
			Vue.config.productionTip=false//阻止生产提示
			
			//创建vue实例
			const vm=new Vue({
				el:'#root',//el用于绑定id为root的容器
				data:{//data存储数据，el指定容器
					name:'上硅谷',
					address:'北京'
				}
			})
		</script>
	</body>
</html>
